<template>
  <div class="doc-view-main">
    <div class="info-warp">
      <div class="info">
        <div class="cover">
          <svg aria-hidden="true" width="200" height="200">
            <use xlink:href="#iconwenjianjia1" />
          </svg>
        </div>
        <div class="text-info">
          <p class="name" v-if="props.fileData">{{ props.fileData?.fileName }}</p>
          <p class="name" v-else>{{ parentFileData.fileName }}</p>
          <p class="desc">{{ desc }}</p>
        </div>
      </div>
      <div></div>
    </div>
    <div class="assistant-warp">
      <div class="type-title">协作人员</div>
      <div class="users-warp">
        <div class="user-item">
          <div class="user-info">
            <el-avatar
              :size="30"
              :src="
                getUserInfo.avatar
                  ? getUserInfo.avatar
                  : 'https://openim-1309784708.cos.ap-shanghai.myqcloud.com/4ce4fccbca32722fdd9d41acb48ef409.jpg'
              "
            />
            <span class="user-name">{{ getUserInfo.userName }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="dynamic-warp">
      <div class="type-title">动态 ( {{ total }} )</div>
      <el-table
        :data="recodeFileData"
        :show-header="false"
        @row-click="handleNodeClick"
        style="width: 100%"
      >
        <el-table-column>
          <template #default="{ row }">
            <div class="file-name-warp">
              <svg class="flie-icon" aria-hidden="true" width="20" height="20">
                <use :xlink:href="getFileSvgIcon(row)" />
              </svg>
              <span class="file-name"> {{ row.fileName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column>
          <template #default="{ row }">
            <div class="operation-warp">
              <i class="iconfont" :class="getOperationType(row.operation)?.icon"></i>
              <span class="operation-span">{{ getOperationType(row.operation)?.label }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column>
          <template #default="{ row }">
            {{ row.user_name }}
          </template>
        </el-table-column>
        <el-table-column width="180">
          <template #default="{ row }">
            {{ row.created_at }}
          </template>
        </el-table-column>
      </el-table>
      <ElConfigProvider :locale="zhCn">
        <div class="pagination-warp" v-if="Array.isArray(recodeFileData) && recodeFileData.length">
          <el-pagination
            v-model:currentPage="params.pageNum"
            v-model:page-size="params.pageSize"
            layout=" prev, pager, next"
            :total="+total"
            @size-change="onSize"
            @current-change="onPage"
          >
          </el-pagination>
        </div>
      </ElConfigProvider>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, computed, onMounted, reactive } from 'vue'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'

import { useRouter } from 'vue-router'
// import { getRecordList } from '@/apis/system/doc-center'
import { ElMessage } from 'element-plus'

import { userStore } from '@/store/user'
import { storeToRefs } from 'pinia'

import Bus from '@/utils/bus'
import { IfileListData } from '../../config/fileListData'
import { getRecordList } from '@/apis/system/docRecord'
import { Itype } from '@/type'

const userData = userStore()
const { userlistData } = storeToRefs(userData)

const props = defineProps({
  fileData: {
    type: Object,
    default: () => {}
  }
})

const $router = useRouter()
const { parent_id, name, desc, userId } = $router.currentRoute.value.query
const parentFileData = ref({
  parentId: parent_id,
  fileName: name,
  desc: desc,
  userId: userId
})

const getUserData = computed(() => (id: number) => {
  return userlistData.value.find((item) => {
    return item.id === id
  })
})

/**
 *
 * @desc:获取登录用户信息
 */
const getUserInfo = computed(() => {
  return JSON.parse(localStorage.getItem('user') as string) || ''
})

/**
 * @desc: 获取动态数据
 */
let params = reactive({
  parent_id: parentFileData.value.parentId,
  pageNum: 1,
  pageSize: 10
})
let total: Itype = ref(0)
const loading = ref(false)
const recodeFileData = ref<IfileListData[]>()
const getRecodeData = () => {
  loading.value = true
  getRecordList(params)
    .then((res) => {
      if (res.rows) {
        total.value = res.total
        res.rows.forEach((element: IfileListData) => {
          element.created_at = new Date(
            +new Date(new Date(element.created_at).toJSON()) + 8 * 3600 * 1000
          )
            .toISOString()
            .replace(/T/g, ' ')
            .replace(/\.[\d]{3}Z/, '')
        })
        recodeFileData.value = res.rows
        loading.value = false
      }
    })
    .catch(() => {
      ElMessage('服务器内部错误123')
    })
}

/**
 * @desc: 分页数量
 * @param {Number} size
 */
const onSize = (size: number) => {
  params.pageSize = size
  params.pageNum = 1
  getRecodeData()
}

/**
 * @desc: 切换页码
 * @param {Number} page
 */
const onPage = (page: number) => {
  params.pageNum = page
  getRecodeData()
}

const fileTypeHash: { [key: string]: string } = {
  bmp: '#iconzhaopian1x',
  jpg: '#iconzhaopian1x',
  png: '#iconzhaopian1x',
  gif: '#iconzhaopian1x',
  jpeg: '#iconzhaopian1x',
  cdr: '#iconzhaopian1x',
  psd: '#iconzhaopian1x',
  doc: '#iconword1x',
  docx: '#iconword1x',
  pdf: '#iconpdf1x',
  ppt: '#iconppt1x',
  pptx: '#iconppt1x',
  xlsx: '#iconexcle1x',
  xls: '#iconexcle1x',
  txt: '#icontxt1x',
  mp3: '#iconyinle',
  wav: '#iconyinle',
  mp4: '#iconzhihuigongdi',
  webm: '#iconzhihuigongdi',
  ogg: '#iconzhihuigongdi',
  folder: '#iconwenjianjia1'
}

const getFileSvgIcon = (data: { type: string; url: string }) => {
  let last = null
  if (!data.url) {
    last = data.type
  } else {
    let arr = data.url.split('.')
    last = arr[arr.length - 1].toLocaleLowerCase()
  }
  return fileTypeHash[last] || '#iconother1x' // 为解决：找不到具有类型为 "string" 的参数的索引签名
}

interface IoperationTypeHash {
  show: IconObj
  add: IconObj
  edit: IconObj
  [key: string]: IconObj
}
interface IconObj {
  icon: string
  label: string
}
const operationTypeHash: IoperationTypeHash = {
  show: {
    icon: 'iconbimgis_xianshi',
    label: '查看'
  },
  add: {
    icon: 'iconxinzeng1',
    label: '新增'
  },
  edit: {
    icon: 'iconbianji1',
    label: '编辑'
  }
}

const getOperationType = (data: string) => {
  if (!data) return
  return operationTypeHash[data]
}

const handleNodeClick = (data: object) => {
  Bus.emit('send-clickNode', data)
}

watch(
  () => props.fileData,
  (newVal) => {
    if (newVal) {
      if (newVal.type === 'folder') {
        let params = {
          page: pager.value.page,
          size: pager.value.size,
          search: [
            {
              code: 'parent_id',
              ruleType: 'eq',
              value: newVal.id
            }
          ]
        }
      }
    }
    getRecodeData()
  },
  { immediate: true }
)
</script>

<style lang="less" scoped>
.doc-view-main {
  .info-warp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .info {
      flex-grow: 1;
      width: 10px;
      display: flex;
      align-items: center;
      .cover {
        width: 200px;
        height: 200px;
        border-radius: 4px;
      }
      .text-info {
        margin-left: 20px;
        height: 200px;
        padding: 20px 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        .name {
          font-size: 1.5em;
          font-weight: 600;
        }
        .desc {
          margin-top: 24px;
          color: #999;
          width: 400px;
        }
      }
    }
  }
  .assistant-warp {
    margin-top: 12px;
    border-top: 1px solid #f1f1f1;
    .type-title {
      padding: 10px;
      font-size: 1.5em;
    }
    .users-warp {
      display: flex;
      flex-wrap: wrap;
      .user-item {
        flex-basis: 100px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        .user-info {
          display: flex;
          align-items: center;
          text-align: center;
          .user-name {
            margin-top: 5px;
            padding-left: 10px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
  .dynamic-warp {
    margin-top: 12px;
    border-top: 1px solid #f1f1f1;
    width: 100%;
    .type-title {
      padding: 10px;
      font-size: 1.5em;
    }
    .file-name-warp {
      display: flex;
      align-items: center;
      .file-name {
        flex-grow: 1;
        width: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-left: 10px;
      }
    }
    .operation-warp {
      display: flex;
      align-items: center;
      .operation-span {
        margin-left: 10px;
      }
    }
    .pagination-warp {
      padding: 10px;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
